<template>
    <el-card class="rolePageBox" v-if="$auth.checkMenuPermissions('system:role:search')">
        <!--搜索组件-->
        <role-search-component :rolesearch="roleSearchEntity" @onSearch="onSearch" />
        <!--按钮组件-->
        <role-option-btn @addRoleBtn="addRoleBtn" @delRoleBtn="delRoleBtn" />
        <!-- 分隔符 -->
        <hr />
        <!--数据展示-->
        <role-data :form-definition="roleDataEntity" :data="roleDataList" @update="update" @del="del"
            @optionRowIds="optionRowIds" />
        <!--对话框-->
        <el-dialog width="580px" :visible.sync="dialogSwitch" :before-close="beforeClose" :close-on-click-modal="false"
            :destroy-on-close="true">
            <role-add-form v-if="openDialogType === 'insert'" ref="roleAddFormRef" :role-add="addRoleEntity"
                :rules="addRoleEntityRles" :menuTree="menuTree" />

            <role-update-form v-else ref="roleUpdateFormRef" :role-update="updateRoleEntity" :rules="updateRoleEntityRles"
                :menuTree="menuTree" />

            <!-- 对话框组件的按钮-->
            <template #footer>
                <el-button @click="confirmExecute" type="primary" size="mini">确认</el-button>
                <el-button @click="switchEvent" type="info" size="mini">取消</el-button>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
import roleSearchComponent from './roleSearchComponent.vue';
import { roleSearchEntity, roleDataEntity, addRoleEntity, updateRoleEntity } from './entity/roleEntity'
import { addRoleEntityRles, updateRoleEntityRles } from './entity/roleVerify'
import roleOptionBtn from './roleOptionBtn.vue';
import roleData from './roleData.vue';
import { getRoleList, addRole, deleteRole, getRoleInfo, updateRole } from '@/api/system/roleApi'
import { getMenuTree } from '@/api/system/menusApi'
import commonDialog from '@/components/common/commonDialog.vue';
import roleAddForm from './roleAddForm.vue';
import roleUpdateForm from './roleUpdateForm.vue';
import { noSelectText } from '@/utils/styleUtils'
export default {
    components: { roleSearchComponent, roleOptionBtn, roleData, commonDialog, roleAddForm, roleUpdateForm },
    data() {
        return {
            roleSearchEntity,
            roleDataEntity,
            roleDataList: [],
            dialogSwitch: false,
            menuTree: [],
            openDialogType: 'insert',
            addRoleEntity,
            addRoleEntityRles,
            updateRoleEntity,
            updateRoleEntityRles,
            activeDataRowIds: [],
        }
    },
    methods: {
        //搜索框初按钮执行事件
        onSearch() {
            let searchQuery = this.$deepCopy(this.roleSearchEntity);
            if (searchQuery.isEnable === 'ALL') {
                searchQuery.isEnable = null;
            }
            getRoleList(searchQuery).then(data => {
                this.roleDataList = data;
            }).catch(err => {
                this.$message.error(err);
            });
            getMenuTree().then(data => {
                this.menuTree = data;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        //加载角色数据
        loadingRoleList() {
            getRoleList().then(data => {
                this.roleDataList = data;
            }).catch(err => {
                this.$message.error(err);
            });
            getMenuTree().then(data => {
                this.menuTree = data;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        //新增角色按钮执行事件
        addRoleBtn() {
            this.openDialogType = 'insert'
            this.switchEvent();
        },
        //修改按钮
        update(roleId) {
            getRoleInfo(roleId).then(data => {
                this.updateRoleEntity = data;
                this.openDialogType = 'update';
                this.switchEvent();
                this.$nextTick(()=>{
                    this.$refs.roleUpdateFormRef.defaultCheckMenuNode();
                })
            }).catch(err => {
                this.$message.error(err);
            })
        },
        //新增或修改对话框确认执行按钮的事件
        confirmExecute() {
            if (this.openDialogType === 'insert') {
                if (this.$refs.roleAddFormRef.validate()) {
                    addRole(this.addRoleEntity).then(data => {
                        this.$message.success("操作成功");
                        this.$refs.roleAddFormRef.reset();
                        //初始化新增对象
                        this.addRoleEntity.roleName = "";
                        this.addRoleEntity.perms = "";
                        this.addRoleEntity.sort = 1;
                        this.addRoleEntity.isEnable = true;
                        this.addRoleEntity.remark = "";
                        this.addRoleEntity.menuIds = [];
                        //重新加载角色信息
                        this.loadingRoleList();
                        //关闭对话框
                        this.switchEvent();
                    }).catch(err => {
                        this.$message.error(err);
                    })
                }
            } else if (this.openDialogType === 'update') {
                if (this.$refs.roleUpdateFormRef.validate()) {
                    updateRole(this.updateRoleEntity).then(data => {
                        this.$message.success("操作成功");
                        //关闭对话框
                        this.switchEvent();
                        //重新加载角色信息
                        this.loadingRoleList();
                        
                    }).catch(err => {
                        this.$message.error(err);
                    })
                }
            }
        },
        //数据表删除按钮
        del(id) {
            this.$confirm('确认要执行删除操作吗?', '操作确认', {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.batchDelete(id);
            }).catch(() => { })
        },
        //选中数据的处理方法
        optionRowIds(rowIds) {
            this.activeDataRowIds = rowIds;
        },
        //批量删除
        delRoleBtn() {
            this.$confirm('确认要执行删除操作吗?', '操作确认', {
                confirmButtonText: "确认",
                cancelButtonText: "取消",
                type: "warning"
            }).then(() => {
                this.batchDelete(this.activeDataRowIds.join());
            }).catch(() => { })
        },
        //删除的方法
        batchDelete(ids) {
            deleteRole(ids).then(data => {
                this.$message.success("删除成功");
                this.loadingRoleList();
            }).catch(err => {
                this.$message.error(err);
            })
        },
        //对话框关闭前校验
        beforeClose(done) {
            if (this.visible) {
                done();
            } else {
                done(false);
            }
        },
        //是否开启对话框
        switchEvent() {
            this.dialogSwitch = !this.dialogSwitch;
        }

    },
    mounted() {
        noSelectText(".rolePageBox")
        this.loadingRoleList();
    }
}
</script>

<style scoped lang="scss"></style>
